<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       .api-field-box .api-field-title{
            font-weight:900;
        }
       .api-field-box .form-group .col-md-8{
            margin: auto 0px;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            //类型
            $("#apiField").on("change","#type",function () {
               var val = $(this).val();
               if(["byte","short","int","long"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                  $("#apiFieldValidator").find(".number,.enums").show();

               }else if(["float","double"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".number").show();

               }else if(["string"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".string,.enums").show();

               }else if(["boolean"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".enums").show();

               }else if(["date","time","timestamp"].indexOf(val) >= 0){

                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
                   $("#apiFieldValidator").find(".dateTime").show();

               }else if(["struct","array"].indexOf(val) >= 0){
                   $("#apiFieldValidator").find(".string,.number,.dateTime,.enums").hide();
               }
            });
        })
    </script>

    <script type="text/javascript">
        $(function () {
            var data =   $("#apiFieldData").data("apiFieldData");
            var field = Object.assign({},data.field);
            $("#apiField").deserializable(field);
             if(field.validator.enums){
                 var enums = [];
                 for(var key in field.validator.enums){
                     enums.push(key+"="+(field.validator.enums[key] ? field.validator.enums[key] : "" ));
                 }
                 field.validator.enums = enums.join("\r\n");
             }
            $("#apiFieldValidator").deserializable(field.validator);
            $("#apiField #type").trigger("change");
        });
    </script>
</head>
<body>
<div class="api-field-box">
    <div id="apiFieldData"></div>
    <h5 class="api-field-title">字段信息</h5>
    <form id="apiField">

        <div class="form-group row">
            <label for="field" class="col-md-3 col-form-label">字段</label>
            <input type="text"  class="form-control col-md-8" id="field" name="field" placeholder="字段">
        </div>


        <div class="form-group row">
            <label for="name" class="col-md-3 col-form-label">名称</label>
            <input type="text"  class="form-control col-md-8" id="name" name="name" placeholder="名称">
        </div>


        <div class="form-group row">
            <label for="type" class="col-md-3 col-form-label">类型</label>
            <select class="form-control col-md-8" id="type" name="type">
                <option value="boolean">boolean</option>
                <option value="byte">byte</option>
                <option value="short">short</option>
                <option value="int">int</option>
                <option value="long">long</option>
                <option value="float">float</option>
                <option value="string">string</option>
                <option value="date">date</option>
                <option value="time">time</option>
                <option value="timestamp">timestamp</option>
                <option value="struct">struct</option>
                <option value="array">array</option>
            </select>
        </div>

        <div class="form-group row">
            <label class="col-md-3 col-form-label">显示</label>
            <div class="col-md-8">
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"  name="visible" id="visibleTrue" value="true">
                    <label class="form-check-label" for="visibleTrue">是</label>
                </div>
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"  name="visible" id="visibleFalse" value="false">
                    <label class="form-check-label" for="visibleFalse">否</label>
                </div>
            </div>
        </div>

        <div class="form-group row">
            <label for="remarks" class="col-md-3 col-form-label">默认值</label>
            <input type="text"  class="form-control col-md-8" id="defaultValue" name="defaultValue" placeholder="默认值"/>
        </div>


        <div class="form-group row">
            <label for="remarks" class="col-md-3 col-form-label">备注</label>
            <textarea  class="form-control col-md-8" id="remarks" name="remarks" placeholder="备注"></textarea>
        </div>
    </form>

    <h5 class="api-field-title">校验信息</h5>
    <form id="apiFieldValidator">

        <div class="form-group row">
            <label  class="col-md-3 col-form-label">状态</label>
            <div class="col-md-8">
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"   name="enable" id="enableTrue" value="true">
                    <label class="form-check-label">开启</label>
                </div>
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"  name="enable" id="enableFalse" value="false">
                    <label class="form-check-label">关闭</label>
                </div>
            </div>
        </div>


        <div class="form-group row">
            <label  class="col-md-3 col-form-label">必填</label>
            <div class="col-md-8">
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"   name="required" id="requiredTrue" value="true">
                    <label class="form-check-label" for="visibleTrue">是</label>
                </div>
                <div class="form-check form-check-inline col-sm-5">
                    <input type="radio" class="form-check-input"  name="required" id="requiredFalse" value="false">
                    <label class="form-check-label" for="visibleFalse">否</label>
                </div>
            </div>
        </div>

        <div class="string">
            <div class="form-group row">
                <label for="minLength" class="col-md-3 col-form-label">最小长度</label>
                <input type="text"  class="form-control col-md-8" id="minLength" name="minLength" placeholder="最小长度">
            </div>


            <div class="form-group row">
                <label for="maxLength" class="col-md-3 col-form-label">最大长度</label>
                <input type="text"  class="form-control col-md-8" id="maxLength" name="maxLength" placeholder="最大长度">
            </div>
        </div>

        <div class="number">
            <div class="form-group row">
                <label for="min" class="col-md-3 col-form-label">最小值</label>
                <input type="text"  class="form-control col-md-8" id="min" name="min" placeholder="最小值">
            </div>

            <div class="form-group row">
                <label for="min" class="col-md-3 col-form-label">最大值</label>
                <input type="text"  class="form-control col-md-8" id="max" name="max" placeholder="最大值">
            </div>
        </div>


        <div class="dateTime">
            <div class="form-group row">
                <label for="datePattern" class="col-md-3 col-form-label">格式化</label>
                <input type="text"  class="form-control col-md-8" id="datePattern" name="datePattern" placeholder="格式">
            </div>
        </div>


        <div class="enums">
            <div class="form-group row">
                <label for="enums" class="col-md-3 col-form-label">字典</label>
                <textarea  class="form-control col-md-8" id="enums" name="enums" placeholder="key=value&#13;&#10;key=value"></textarea>
            </div>
        </div>


        <div class="form-group row">
            <label for="regex" class="col-md-3 col-form-label">正则</label>
            <textarea class="form-control col-md-8" id="regex" name="regex" placeholder="正则表达式"></textarea>
        </div>


        <div class="form-group row">
            <label for="ognl" class="col-md-3 col-form-label">OGNL</label>
            <textarea class="form-control col-md-8" id="ognl" name="ognl" placeholder="OGNL表达式"></textarea>
        </div>


        <div class="form-group row">
            <label for="errorMsg" class="col-md-3 col-form-label">提示</label>
            <textarea  class="form-control col-md-8" id="errorMsg" name="errorMsg" placeholder="提示"></textarea>
        </div>

    </form>
</div>

</body>
</html>